/**
 * Author: Lily Jiang
 * Create Time: 2019/12/24
 * Description:
 */

import React from "react";
import { connect } from "react-redux";
import * as actions from "@/store/actions";
import './Index.scss'
import {Link} from "react-router-dom";
import { Toast } from 'antd-mobile';

class ArticleDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            routeParams: {},
            info: {},
            loading: false,
            bigText: 0
        };
    }

    componentDidMount() {
        this.getInfo()

        window.localforage.getItem('bigText').then(data => {
            if (data != null) {
                this.setState({
                    bigText: data
                })
            }
        })
    }

    changeLoadingState = (status) => {
        this.props.dispatch(actions.updateAppSetting({
            appLoading: status
        }))
    }

    goBack = () => {
        window.history.back()
    }

    getInfo = () => {
        this.changeLoadingState(true)
        React.$api.articleInfo({
            'article_id': this.props.location.searchObj.articleId
        }).then(data => {
            this.setState({
                info: data || {}
            })
            this.changeLoadingState(false)
        }, err => {
            this.changeLoadingState(false)
            err.msg && Toast.info(err.msg)
        })
    }

    collect = () => {
        this.changeLoadingState(true)
        React.$api.collect({
            'article_id': this.state.info.id,
            'collect_id': this.state.info.collect_id || ''
        }).then(data => {
            this.setState({
                info: {
                    ...this.state.info,
                    collect_id: this.state.info.collect_id ? '' : data
                }
            })
            this.changeLoadingState(false)
        }, err => {
            this.changeLoadingState(false)
            Toast.info(err.msg)
        })
    }

    like = () => {
        this.changeLoadingState(true)
        React.$api.articleLike({
            'article_id': this.state.info.id,
            'like_id': this.state.info.like_id || ''
        }).then(data => {
            this.setState({
                info: {
                    ...this.state.info,
                    like_id: this.state.info.like_id ? '' : data
                }
            })
            this.changeLoadingState(false)
        }, err => {
            this.changeLoadingState(false)
            err.msg && Toast.info(err.msg)
        })
    }


    render() {
        return (
            <div className="app-container-scroll page-articleDetail">
                <div className="w-1-1 aspectratio header">
                    <div className="aspectratio-content" style={{backgroundImage: `url(${this.state.info.picture})`}}>
                        <div className="info">
                            <div className={this.state.bigText === 1 ? 'title big-text' : "title" }>{this.state.info.picture_title || this.state.info.title || ''}</div>
                            {/*<div className="img-source">emma/asds</div>*/}
                        </div>
                    </div>
                </div>

                <div className="main">
                    <div className="fs18 fb mb20">{this.state.info.title || ''}</div>
                    <div className="author">作者 / {(this.state.info.user && this.state.info.user.username) || '匿名用户'}</div>
                    <div className={this.state.bigText === 1 ? 'rich-text-wrap big-text' : 'rich-text-wrap'} dangerouslySetInnerHTML={{__html: this.state.info.content || ''}}></div>
                </div>

                <div className="footer">
                    <div className="back-btn btn" onClick={this.goBack}>
                        <img src={require("../../../assets/images/common/zuojiantou.png")} alt=""/>
                    </div>
                    <Link className="btn" to={"/article/comments?articleId=" + this.state.info.id}>
                        <img src={require("../../../assets/images/common/pinlun_hei.png")} alt=""/><sup>{this.state.info.comment_count || ''}</sup>
                    </Link>
                    <div className="btn">
                        <img onClick={this.like} src={this.state.info.like_id ? require("../../../assets/images/common/zan_lan.png") : require("../../../assets/images/common/zan_hei.png")} alt=""/><sup className={this.state.info.like_id ? 'theme-color' : ''}>{this.state.info.like_count || ''}</sup>
                    </div>
                    <div className="btn">
                        <img onClick={this.collect} src={this.state.info.collect_id ? require("../../../assets/images/common/xing_lan.png") : require("../../../assets/images/common/xing_hei.png")} alt=""/>
                    </div>
                    <div className="btn">
                        <img src={require("../../../assets/images/common/zhuanfa.png")} alt=""/>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect()(ArticleDetail)